<template>
    <TreeSelect 
      class="st"
      v-model="value"
      ref = 'selectTree'
      :options="fields.dataSource" 
      :field="{label:fields.text,value:fields.value,child:fields.child}"
      @change="onchange"
       ></TreeSelect>
</template>

<script>
import TreeSelect from './TreeSelect.vue';
export default {
  components: { TreeSelect:TreeSelect, },
  data() {
    return {
        value:null,
        ej2Instances:this
    }
  },
  props:{
    fields:{        
      type:Object,
      default:()=>{
        return {
        dataSource:[],
        value: 'ELE_ID',
        text: 'text',
        child: 'children',}
      }
    },
    placeholder:{
        type:String,
        default:""
    },
    popupWidth:{
      type:Number,
      default:null,
    },
    popupHeight:{
      type:Number,
      default:null,
    }
  },
  mounted(){
    // this.$refs.selectControl.focus();
  },
  methods:{
    onchange(e){
      this.$emit('change',e);
    },
    clear(){
      this.value = '';
      this.$emit('change','');
    }
  }
}
</script>
<style>
.st{
    width: 100%;
    height: 100%;
}
</style>